<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>箱码现存量查询</title>
		<link rel="stylesheet" type="text/css" href="../../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../../css/local.css" />
		<link rel="stylesheet" type="text/css" href="../../script/layer_new/css/layui.css" />
		<script type="text/javascript" src="../../script/layer_new/layui.js"></script>
		<script type="text/javascript" src="../../script/jquery.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/vant.min.js"></script>
		<script type="text/javascript" src="../../script/fastclick.js"></script>
		<script type="text/javascript" src="../../script/base.js"></script>
		<script type="text/javascript" src="../../script/scanTransf.js"></script>
		<style type="text/css">
			/* .label {
				color: #969799;
			}

			.button {
				padding: 17px 0;
				text-align: center;
				font-size: 13px;
				color: #969799;
			}

			.content {
				padding: 8px 8px 0;
			}

			.cardBox {
				background-color: #fff;
				padding: 10px 4px;
				border-radius: 12px;
				box-shadow: 1px 2px 5px -1px #8a8a8a;
				margin-bottom: 8px;
			} */

			.cmid>div:first-child {
				padding-bottom: 8px;
				border-bottom: 1px solid #969799;
			}

			.cmid>div:first-child>.cmidValue {
				font-weight: bold;
			}

			.cmidLabel {
				/* margin-left: 8px; */
				font-weight: bold;
				margin-left: 0px;
				color: #3a3a3a;
				/* width: 68px; */
				/* background-color: red; */
			}

			.cmidValue {
				flex: 1;
				/* margin-left: 8px; */
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="box">
				<van-nav-bar class="head" :title="titleName" :safe-area-inset-top="true" left-arrow
					@click-left="onClickLeft">
					<span slot="right" @click="openScan" v-if="!isPDA">
						<img src="../../image/scan.png" />
					</span>
				</van-nav-bar>

				<div class="flex-box flex-direction-c">
					<div>
						<form action="">
							<van-search v-model="searchValue" placeholder="请输入箱码或者扫描箱码" @blur="getSearchList"
								@search="getSearchList" />
						</form>
					</div>
				</div>

				<div class="content flex-box flex-direction-c">
					<div class="button" v-if="!Detail.length">
						<span>暂无数据</span>
					</div>
					<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="listOnLoad">
						<div class="content-refresh">
							<div class="module" v-for="(item,index) in Detail" @click="intoRow(item)">
								<div>
									<div class="cmid flex-box">
										<div>
											<div class="cmidLabel">箱码</div>
											<div class="cmidValue">{{item.FBoxCode}}</div>
										</div>
										<div>
											<div class="cmidLabel">产品信息</div>
											<div class="cmidValue">{{item.ProductName}}</div>
										</div>
										<div>
											<div class="cmidLabel">现存量</div>
											<div class="cmidValue">{{item.FQty}}</div>
										</div>
										<div>
											<div class="cmidLabel">计量单位</div>
											<div class="cmidValue">{{item.UnitName}}</div>
										</div>
										<div>
											<div class="cmidLabel">批次号</div>
											<div class="cmidValue">{{item.FBatchNo}}</div>
										</div>
										<div>
											<div class="cmidLabel">所在仓库</div>
											<div class="cmidValue">{{item.FWarehouseName}}</div>
										</div>
										<div>
											<div class="cmidLabel">所在库位</div>
											<div class="cmidValue">{{item.FStorageCode}}</div>
										</div>
									</div>

									<!-- <van-row style="padding-left: 13px;">
										<van-col span="24"><span class="label">箱码:</span>{{item.FBoxCode}}</van-col>
										<van-col span="24"><span class="label">产品信息:</span>{{item.ProductName}}
										</van-col>
										<van-col span="12"><span class="label">现存量:</span>{{item.FQty}}
										</van-col>
										<van-col span="12"><span class="label">计量单位:</span>{{item.UnitName}}
										</van-col>
										<van-col span="24"><span class="label">批次号:</span>{{item.FBatchNo}}</van-col>
										<van-col span="12"><span class="label">所在仓库:</span>{{item.FWarehouseName}}
										</van-col>
										<van-col span="12"><span class="label">所在库位:</span>{{item.FStorageCode}}
										</van-col>
									</van-row> -->
									<!-- <div class="label flex-box">
										<div class="sn">{{index+1}}</div>
										<div class="flex-main djcode">退货单号<span>{{row.FCode}}</span></div>
									</div>

									<div class="cmid flex-box">
										<van-divider></van-divider>
										<div>
											<div class="cmidIcon">
												<van-icon name="underway-o"></van-icon>
											</div>
											<div class="cmidLabel">退货日期</div>
											<div class="cmidValue">{{row.FDate}}</div>
										</div>
										<div>
											<div class="cmidIcon">
												<van-icon name="wap-home-o"></van-icon>
											</div>
											<div class="cmidLabel">出库仓库</div>
											<div class="cmidValue">{{row.FWarehouseName}}</div>
										</div>
										<div>
											<div class="cmidIcon">
												<van-icon name="manager-o"></van-icon>
											</div>
											<div class="cmidLabel">供应商</div>
											<div class="cmidValue">{{row.SupplyName}}</div>
										</div>

										<div class="approval" v-if="row.Approve">
											<img src="../../image/approval_success.png" />
										</div> -->
								</div>
							</div>
						</div>
				</div>

				<!-- <van-cell v-for="(item,index) in Detail" :key="index" class="cardBox">
							<div style="position: relative;">
								<van-row style="padding-left: 13px;">
									<van-col span="24"><span class="label">箱码:</span>{{item.FBoxCode}}</van-col>
									<van-col span="24"><span class="label">产品信息:</span>{{item.ProductName}}
									</van-col>
									<van-col span="12"><span class="label">现存量:</span>{{item.FQty}}
									</van-col>
									<van-col span="12"><span class="label">计量单位:</span>{{item.UnitName}}
									</van-col>
									<van-col span="24"><span class="label">批次号:</span>{{item.FBatchNo}}</van-col>
									<van-col span="12"><span class="label">所在仓库:</span>{{item.FWarehouseName}}
									</van-col>
									<van-col span="12"><span class="label">所在库位:</span>{{item.FStorageCode}}
									</van-col>
								</van-row>
							</div>
						</van-cell> -->
				</van-list>
			</div>
		</div>
		</div>
	</body>
	<script src="../../script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		// 开启 h5 页面 与 vue主页面的 信息交互
		document.addEventListener('UniAppJSBridgeReady', function() {

		})

		function scanHandler(scanData) {
			if (vm.scanDisabled) {
				layer.open({
					content: '数据提交中,请稍后再试',
					skin: 'msg',
					time: 2000
				});
				return false;
			}
			if (!scanData) {
				layer.open({
					content: '请扫描正确的条码',
					skin: 'msg',
					time: 2000
				});
				return false;
			}

			if (scanData.type == '箱码') {
				vm.pageIndex = 1;
				let obj = {};
				obj.ProductID = 0;
				obj.FBoxCode = scanData.recode;
				obj.pageSize = vm.pageSize;
				obj.pageIndex = vm.pageIndex;
				// console.log(JSON.stringify(obj));
				APP.jqueryAjax('XMCX', obj, function(res) {
					// console.log(JSON.stringify(res))
					vm.listFinished = true;
					if (res.ds.length) {
						vm.Detail = res.ds;
					} else {
						layer.open({
							content: '箱码不存在或已出库！！请重新扫码查询！',
							skin: 'msg',
							time: 2000
						});
					}

				})

			} else {
				vm.scanDisabled = true;
				vm.scanDisabled = false;
				layer.open({
					content: '请扫描正确的条码',
					skin: 'msg',
					time: 2000
				});
			}
		}

		var vm = new Vue({
			el: '#app',
			data: {
				listLoading: false,
				listFinished: true,
				pageSize: 20,
				pageIndex: 1,
				titleName: '',
				Detail: [],
				ProductID: 0,
				searchValue: '',
				isPDA: false,
				immersed: 0,
				id: 0
			},
			mounted() {
				let that = this;
				that.initPageData();
			},
			created: function() {
				var that = this;
				let immersed = 0;
				//获取当前手机状态栏高度
				if (window.localStorage.getItem('safeAreaInsetTop')) {
					immersed = window.localStorage.getItem('safeAreaInsetTop');
				} else {
					let ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator
						.userAgent);
					if (ms && ms.length >= 3) { // 当前环境为沉浸式状态栏模式
						immersed = parseFloat(ms[2]); // 获取状态栏的高度
					}
					window.localStorage.setItem('safeAreaInsetTop', immersed)

				}
				that.immersed = immersed;

				$('.head').css({
					'padding-top': that.immersed + 'px'
				});
			},
			methods: {

				SetScanData(result) {
					let scanData = scanTransf(result);
					console.log(JSON.stringify(scanData));
					scanHandler(scanData);
				},

				initPageData() {
					let that = this;
					let xmParam = JSON.parse(window.localStorage.getItem('xmParam'));
					that.ProductID = xmParam.ProductID;
					that.titleName = xmParam.titleName;
					that.id = xmParam.id;

					that.isPDA = JSON.parse(localStorage.getItem('isPDA'));

					if (that.ProductID) {
						that.getSearchList();
					}
				},

				openScan() {
					this.sendMessage('openCamera', null);
				},

				getSearchList() {
					var that = this;
					that.pageIndex = 1;
					let obj = {};
					obj.ProductID = that.ProductID;
					obj.FBoxCode = that.searchValue;
					obj.pageSize = that.pageSize;
					obj.pageIndex = that.pageIndex;
					console.log(JSON.stringify(obj));
					APP.jqueryAjax('XMCX', obj, function(res) {
						console.log(JSON.stringify(res))
						that.listFinished = false;
						vm.Detail = [];
						if (res.ds.length) {
							vm.Detail = res.ds;
						}
					})
				},

				listOnLoad() {
					var that = this;
					that.pageIndex++;
					let obj = {};
					obj.ProductID = that.ProductID;
					obj.FBoxCode = that.searchValue;
					obj.pageSize = that.pageSize;
					obj.pageIndex = that.pageIndex;
					console.log(JSON.stringify(obj));
					APP.jqueryAjax('XMCX', obj, function(res) {
						console.log(JSON.stringify(res))
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						vm.Detail = vm.Detail.concat(res.ds);
					})
				},

				sendMessage(action, data) {
					uni.postMessage({
						data: {
							action: action,
							data: data
						}
					})
				},

				onClickLeft() {
					uni.navigateBack();
				}
			}
		})
	</script>

</html>